<template>
	<view class="feedback-container">
		<!-- 主内容区域 -->
		<bg-navBar :title="' '" :navStyle="{ position: 'fixed' }" :showHeaderBg="false"></bg-navBar>
		<view class="top-bg">
			<image src="@/static/images/bg3.jpg" mode="aspectFill"></image>
		</view>

		<view class="main-content">
			<!-- 页面标题 -->

			<!-- 问题类型选择 -->
			<view class="problem-type-section">
				<view class="section-label">选择问题类型</view>
				<view class="type-buttons">
					<view class="type-btn" :class="{ active: selectedType === 'suggestion' }" @click="selectType('suggestion')">建议</view>
					<view class="type-btn" :class="{ active: selectedType === 'complaint' }" @click="selectType('complaint')">投诉</view>
					<view class="type-btn" :class="{ active: selectedType === 'report' }" @click="selectType('report')">举报</view>
				</view>
			</view>

			<!-- 用户信息 -->
			<!-- <view class="user-info-section">
				<view class="section-label">您是</view>
				<view class="user-info" @click="editUserInfo">
					<text class="user-type">用户</text>
					<text class="arrow yticon icon-you"></text>
				</view>
			</view> -->

			<!-- 问题描述 -->
			<view class="description-section">
				<view class="textarea-container">
					<textarea
						class="description-textarea"
						v-model="description"
						placeholder="请简单描述下您的问题,感谢你的关注和支持,我们会尽快向您反馈相关处理结果;"
						maxlength="500"
						@input="onDescriptionInput"
					></textarea>
					<view class="char-count">{{ description.length }}/500</view>
				</view>
			</view>

			<!-- 图片上传 -->
			<view class="image-upload-section">
				<view class="section-label">上传图片</view>
				<u-upload :fileList="fileList1" :sizeType="['compressed']" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="5"></u-upload>
			</view>
		</view>
		<u-action-sheet :actions="list" title="选择角色" :show="show" @select="selectClick"></u-action-sheet>
		<!-- 底部提交按钮 -->
		<view class="footer-submit">
			<button class="submit-btn" @click="submitFeedback">提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedType: 'complaint', // 默认选中举报
			description: '',
			company_id: '',
			userType: '用户',
			show: false,
			fileList1: [],
			list: [
				{
					id: 1,
					name: '用户'
				},
				{
					id: 2,
					name: '仓主'
				},
				{
					id: 3,
					name: '供应商'
				}
			]
		};
	},
	methods: {
		selectClick(item) {
			console.log(item);
		},
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				let companyInfo = this.$store.companyInfo || {};
				let company_id = this.company_id || companyInfo.company_id;
				const result = await this.$api.upload(company_id, lists[i].url, '', 'shouhou');
				let url = this.$picServerPath + 'Upload/' + company_id + '/shouhou/' + result;
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url
					})
				);
				fileListLen++;
			}
		},
		goBack() {
			uni.navigateBack();
		},
		selectType(type) {
			this.selectedType = type;
		},
		editUserInfo() {
			// 编辑用户信息
			console.log('编辑用户信息');
			this.show = true;
		},
		onDescriptionInput(e) {
			this.description = e.detail.value;
		},
		uploadImage() {
			// 上传图片
			uni.chooseImage({
				count: 1,
				success: (res) => {
					console.log('选择图片:', res);
				}
			});
		},
		viewHistory() {
			// 查看历史反馈
			console.log('查看历史反馈');
		},
		submitFeedback() {
			// 提交反馈
			if (!this.description.trim()) {
				uni.showToast({
					title: '请描述您的问题',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			setTimeout(() => {
				uni.hideLoading();
				this.msg('提交成功', 'success', () => {
					uni.navigateBack();
				});
			}, 500);
		}
	}
};
</script>

<style lang="scss">
.feedback-container {
	min-height: 100vh;
	// background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
	position: relative;
	z-index: 1;
	.top-bg {
		// position: absolute;
		// z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 313rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.main-content {
		width: 100%;
		padding: 40rpx 30rpx;
		background: #fff;
		.page-title {
			margin-bottom: 60rpx;

			.title {
				display: block;
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.subtitle {
				display: block;
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
			}
		}

		.problem-type-section {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			.section-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				padding-right: 40rpx;
			}

			.type-buttons {
				flex: 1;
				display: flex;
				gap: 10rpx;

				.type-btn {
					flex: 1;
					height: 80rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #ddd;
					border-radius: 12rpx;
					font-size: 28rpx;
					color: #666;
					background: #fff;
					transition: all 0.3s;

					&.active {
						background: #246ef9;
						color: #fff;
						border-color: #246ef9;
					}
				}
			}
		}

		.user-info-section {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			.section-label {
				font-size: 28rpx;
				color: #333;
				// margin-bottom: 20rpx;
				font-weight: 500;
				padding-right: 40rpx;
				flex: 1;
			}

			.user-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				.user-type {
					font-size: 28rpx;
					color: #333;
				}

				.arrow {
					font-size: 32rpx;
					color: #999;
				}
			}
		}

		.description-section {
			margin-bottom: 40rpx;

			.section-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
			}

			.textarea-container {
				position: relative;

				.description-textarea {
					width: 100%;
					height: 200rpx;
					padding: 20rpx;
					border: 2rpx solid #ddd;
					border-radius: 12rpx;
					font-size: 28rpx;
					line-height: 1.5;
					background: #fff;
					box-sizing: border-box;
				}

				.char-count {
					position: absolute;
					bottom: 10rpx;
					right: 20rpx;
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.image-upload-section {
			margin-bottom: 40rpx;

			.section-label {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 20rpx;
				font-weight: 500;
			}

			.upload-area {
				width: 200rpx;
				height: 200rpx;
				border: 2rpx dashed #ddd;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fafafa;

				.upload-icon {
					font-size: 60rpx;
					color: #999;
				}
			}
		}
	}

	.footer-submit {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1rpx solid #eee;

		.submit-btn {
			width: 100%;
			height: 88rpx;
			background: #246ef9;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			border: none;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
